<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>web-icons</title>
		<link rel="stylesheet" href="../css/web-icons.css">
		<style>
		body {
			margin:0;
			padding:10px 20px;
			background:#fff;
			color:#222;
		}
		h1, div, footer {
			font-family:"Helvetica Neue", Arial, sans-serif;
		}
		h1 {
			margin:0 0 20px;
			font-size:32px;
			font-weight:normal;
		}
		.icons {
			margin-bottom:40px;
			-webkit-column-count:5;
			   -moz-column-count:5;
			        column-count:5;
			-webkit-column-gap:20px;
			   -moz-column-gap:20px;
			        column-gap:20px;
		}
		.icons__item,
		.icons__item i {
			line-height:2em;
			cursor:pointer;
		}
		.icons__item:hover {
			color:#3c90be;
		}
		.icons__item i {
			display:inline-block;
			width:32px;
			text-align:center;
		}
		.icons__item:hover i {
			-webkit-transform:scale(2);
			        transform:scale(2);
		}
		footer {
			margin-top:40px;
			font-size:14px;
			color:#999;
		}
		</style>
	</head>
	<body>
		<h1>web-icons</h1>

		<div class="icons" id="icons">
			
				<div class="icons__item" data-name="dashboard"><i class="wb-dashboard"></i> wb-dashboard</div>
			
				<div class="icons__item" data-name="inbox"><i class="wb-inbox"></i> wb-inbox</div>
			
				<div class="icons__item" data-name="cloud"><i class="wb-cloud"></i> wb-cloud</div>
			
				<div class="icons__item" data-name="bell"><i class="wb-bell"></i> wb-bell</div>
			
				<div class="icons__item" data-name="book"><i class="wb-book"></i> wb-book</div>
			
				<div class="icons__item" data-name="bookmark"><i class="wb-bookmark"></i> wb-bookmark</div>
			
				<div class="icons__item" data-name="tag"><i class="wb-tag"></i> wb-tag</div>
			
				<div class="icons__item" data-name="library"><i class="wb-library"></i> wb-library</div>
			
				<div class="icons__item" data-name="share"><i class="wb-share"></i> wb-share</div>
			
				<div class="icons__item" data-name="reply"><i class="wb-reply"></i> wb-reply</div>
			
				<div class="icons__item" data-name="refresh"><i class="wb-refresh"></i> wb-refresh</div>
			
				<div class="icons__item" data-name="move"><i class="wb-move"></i> wb-move</div>
			
				<div class="icons__item" data-name="chat"><i class="wb-chat"></i> wb-chat</div>
			
				<div class="icons__item" data-name="chat-working"><i class="wb-chat-working"></i> wb-chat-working</div>
			
				<div class="icons__item" data-name="chat-text"><i class="wb-chat-text"></i> wb-chat-text</div>
			
				<div class="icons__item" data-name="chat-group"><i class="wb-chat-group"></i> wb-chat-group</div>
			
				<div class="icons__item" data-name="envelope"><i class="wb-envelope"></i> wb-envelope</div>
			
				<div class="icons__item" data-name="envelope-open"><i class="wb-envelope-open"></i> wb-envelope-open</div>
			
				<div class="icons__item" data-name="user"><i class="wb-user"></i> wb-user</div>
			
				<div class="icons__item" data-name="user-circle"><i class="wb-user-circle"></i> wb-user-circle</div>
			
				<div class="icons__item" data-name="users"><i class="wb-users"></i> wb-users</div>
			
				<div class="icons__item" data-name="user-add"><i class="wb-user-add"></i> wb-user-add</div>
			
				<div class="icons__item" data-name="grid-9"><i class="wb-grid-9"></i> wb-grid-9</div>
			
				<div class="icons__item" data-name="grid-4"><i class="wb-grid-4"></i> wb-grid-4</div>
			
				<div class="icons__item" data-name="menu"><i class="wb-menu"></i> wb-menu</div>
			
				<div class="icons__item" data-name="layout"><i class="wb-layout"></i> wb-layout</div>
			
				<div class="icons__item" data-name="fullscreen"><i class="wb-fullscreen"></i> wb-fullscreen</div>
			
				<div class="icons__item" data-name="fullscreen-exit"><i class="wb-fullscreen-exit"></i> wb-fullscreen-exit</div>
			
				<div class="icons__item" data-name="expand"><i class="wb-expand"></i> wb-expand</div>
			
				<div class="icons__item" data-name="contract"><i class="wb-contract"></i> wb-contract</div>
			
				<div class="icons__item" data-name="arrow-expand"><i class="wb-arrow-expand"></i> wb-arrow-expand</div>
			
				<div class="icons__item" data-name="arrow-shrink"><i class="wb-arrow-shrink"></i> wb-arrow-shrink</div>
			
				<div class="icons__item" data-name="desktop"><i class="wb-desktop"></i> wb-desktop</div>
			
				<div class="icons__item" data-name="mobile"><i class="wb-mobile"></i> wb-mobile</div>
			
				<div class="icons__item" data-name="signal"><i class="wb-signal"></i> wb-signal</div>
			
				<div class="icons__item" data-name="power"><i class="wb-power"></i> wb-power</div>
			
				<div class="icons__item" data-name="more-horizontal"><i class="wb-more-horizontal"></i> wb-more-horizontal</div>
			
				<div class="icons__item" data-name="more-vertical"><i class="wb-more-vertical"></i> wb-more-vertical</div>
			
				<div class="icons__item" data-name="globe"><i class="wb-globe"></i> wb-globe</div>
			
				<div class="icons__item" data-name="map"><i class="wb-map"></i> wb-map</div>
			
				<div class="icons__item" data-name="flag"><i class="wb-flag"></i> wb-flag</div>
			
				<div class="icons__item" data-name="pie-chart"><i class="wb-pie-chart"></i> wb-pie-chart</div>
			
				<div class="icons__item" data-name="stats-bars"><i class="wb-stats-bars"></i> wb-stats-bars</div>
			
				<div class="icons__item" data-name="pluse"><i class="wb-pluse"></i> wb-pluse</div>
			
				<div class="icons__item" data-name="home"><i class="wb-home"></i> wb-home</div>
			
				<div class="icons__item" data-name="shopping-cart"><i class="wb-shopping-cart"></i> wb-shopping-cart</div>
			
				<div class="icons__item" data-name="payment"><i class="wb-payment"></i> wb-payment</div>
			
				<div class="icons__item" data-name="briefcase"><i class="wb-briefcase"></i> wb-briefcase</div>
			
				<div class="icons__item" data-name="search"><i class="wb-search"></i> wb-search</div>
			
				<div class="icons__item" data-name="zoom-in"><i class="wb-zoom-in"></i> wb-zoom-in</div>
			
				<div class="icons__item" data-name="zoom-out"><i class="wb-zoom-out"></i> wb-zoom-out</div>
			
				<div class="icons__item" data-name="download"><i class="wb-download"></i> wb-download</div>
			
				<div class="icons__item" data-name="upload"><i class="wb-upload"></i> wb-upload</div>
			
				<div class="icons__item" data-name="sort-asc"><i class="wb-sort-asc"></i> wb-sort-asc</div>
			
				<div class="icons__item" data-name="sort-des"><i class="wb-sort-des"></i> wb-sort-des</div>
			
				<div class="icons__item" data-name="graph-up"><i class="wb-graph-up"></i> wb-graph-up</div>
			
				<div class="icons__item" data-name="graph-down"><i class="wb-graph-down"></i> wb-graph-down</div>
			
				<div class="icons__item" data-name="replay"><i class="wb-replay"></i> wb-replay</div>
			
				<div class="icons__item" data-name="edit"><i class="wb-edit"></i> wb-edit</div>
			
				<div class="icons__item" data-name="pencil"><i class="wb-pencil"></i> wb-pencil</div>
			
				<div class="icons__item" data-name="rubber"><i class="wb-rubber"></i> wb-rubber</div>
			
				<div class="icons__item" data-name="crop"><i class="wb-crop"></i> wb-crop</div>
			
				<div class="icons__item" data-name="eye"><i class="wb-eye"></i> wb-eye</div>
			
				<div class="icons__item" data-name="eye-close"><i class="wb-eye-close"></i> wb-eye-close</div>
			
				<div class="icons__item" data-name="image"><i class="wb-image"></i> wb-image</div>
			
				<div class="icons__item" data-name="gallery"><i class="wb-gallery"></i> wb-gallery</div>
			
				<div class="icons__item" data-name="video"><i class="wb-video"></i> wb-video</div>
			
				<div class="icons__item" data-name="camera"><i class="wb-camera"></i> wb-camera</div>
			
				<div class="icons__item" data-name="folder"><i class="wb-folder"></i> wb-folder</div>
			
				<div class="icons__item" data-name="clipboard"><i class="wb-clipboard"></i> wb-clipboard</div>
			
				<div class="icons__item" data-name="order"><i class="wb-order"></i> wb-order</div>
			
				<div class="icons__item" data-name="file"><i class="wb-file"></i> wb-file</div>
			
				<div class="icons__item" data-name="copy"><i class="wb-copy"></i> wb-copy</div>
			
				<div class="icons__item" data-name="add-file"><i class="wb-add-file"></i> wb-add-file</div>
			
				<div class="icons__item" data-name="print"><i class="wb-print"></i> wb-print</div>
			
				<div class="icons__item" data-name="calendar"><i class="wb-calendar"></i> wb-calendar</div>
			
				<div class="icons__item" data-name="time"><i class="wb-time"></i> wb-time</div>
			
				<div class="icons__item" data-name="trash"><i class="wb-trash"></i> wb-trash</div>
			
				<div class="icons__item" data-name="plugin"><i class="wb-plugin"></i> wb-plugin</div>
			
				<div class="icons__item" data-name="extension"><i class="wb-extension"></i> wb-extension</div>
			
				<div class="icons__item" data-name="memory"><i class="wb-memory"></i> wb-memory</div>
			
				<div class="icons__item" data-name="settings"><i class="wb-settings"></i> wb-settings</div>
			
				<div class="icons__item" data-name="scissor"><i class="wb-scissor"></i> wb-scissor</div>
			
				<div class="icons__item" data-name="wrench"><i class="wb-wrench"></i> wb-wrench</div>
			
				<div class="icons__item" data-name="hammer"><i class="wb-hammer"></i> wb-hammer</div>
			
				<div class="icons__item" data-name="lock"><i class="wb-lock"></i> wb-lock</div>
			
				<div class="icons__item" data-name="unlock"><i class="wb-unlock"></i> wb-unlock</div>
			
				<div class="icons__item" data-name="volume-low"><i class="wb-volume-low"></i> wb-volume-low</div>
			
				<div class="icons__item" data-name="volume-high"><i class="wb-volume-high"></i> wb-volume-high</div>
			
				<div class="icons__item" data-name="volume-off"><i class="wb-volume-off"></i> wb-volume-off</div>
			
				<div class="icons__item" data-name="pause"><i class="wb-pause"></i> wb-pause</div>
			
				<div class="icons__item" data-name="play"><i class="wb-play"></i> wb-play</div>
			
				<div class="icons__item" data-name="stop"><i class="wb-stop"></i> wb-stop</div>
			
				<div class="icons__item" data-name="musical"><i class="wb-musical"></i> wb-musical</div>
			
				<div class="icons__item" data-name="random"><i class="wb-random"></i> wb-random</div>
			
				<div class="icons__item" data-name="reload"><i class="wb-reload"></i> wb-reload</div>
			
				<div class="icons__item" data-name="loop"><i class="wb-loop"></i> wb-loop</div>
			
				<div class="icons__item" data-name="text"><i class="wb-text"></i> wb-text</div>
			
				<div class="icons__item" data-name="bold"><i class="wb-bold"></i> wb-bold</div>
			
				<div class="icons__item" data-name="italic"><i class="wb-italic"></i> wb-italic</div>
			
				<div class="icons__item" data-name="underline"><i class="wb-underline"></i> wb-underline</div>
			
				<div class="icons__item" data-name="format-clear"><i class="wb-format-clear"></i> wb-format-clear</div>
			
				<div class="icons__item" data-name="text-type"><i class="wb-text-type"></i> wb-text-type</div>
			
				<div class="icons__item" data-name="table"><i class="wb-table"></i> wb-table</div>
			
				<div class="icons__item" data-name="attach-file"><i class="wb-attach-file"></i> wb-attach-file</div>
			
				<div class="icons__item" data-name="paperclip"><i class="wb-paperclip"></i> wb-paperclip</div>
			
				<div class="icons__item" data-name="link-intact"><i class="wb-link-intact"></i> wb-link-intact</div>
			
				<div class="icons__item" data-name="link"><i class="wb-link"></i> wb-link</div>
			
				<div class="icons__item" data-name="link-broken"><i class="wb-link-broken"></i> wb-link-broken</div>
			
				<div class="icons__item" data-name="indent-increase"><i class="wb-indent-increase"></i> wb-indent-increase</div>
			
				<div class="icons__item" data-name="indent-decrease"><i class="wb-indent-decrease"></i> wb-indent-decrease</div>
			
				<div class="icons__item" data-name="align-justify"><i class="wb-align-justify"></i> wb-align-justify</div>
			
				<div class="icons__item" data-name="align-left"><i class="wb-align-left"></i> wb-align-left</div>
			
				<div class="icons__item" data-name="align-center"><i class="wb-align-center"></i> wb-align-center</div>
			
				<div class="icons__item" data-name="align-right"><i class="wb-align-right"></i> wb-align-right</div>
			
				<div class="icons__item" data-name="list-numbered"><i class="wb-list-numbered"></i> wb-list-numbered</div>
			
				<div class="icons__item" data-name="list-bulleted"><i class="wb-list-bulleted"></i> wb-list-bulleted</div>
			
				<div class="icons__item" data-name="list"><i class="wb-list"></i> wb-list</div>
			
				<div class="icons__item" data-name="emoticon"><i class="wb-emoticon"></i> wb-emoticon</div>
			
				<div class="icons__item" data-name="quote-right"><i class="wb-quote-right"></i> wb-quote-right</div>
			
				<div class="icons__item" data-name="code"><i class="wb-code"></i> wb-code</div>
			
				<div class="icons__item" data-name="code-working"><i class="wb-code-working"></i> wb-code-working</div>
			
				<div class="icons__item" data-name="code-unfold"><i class="wb-code-unfold"></i> wb-code-unfold</div>
			
				<div class="icons__item" data-name="chevron-right"><i class="wb-chevron-right"></i> wb-chevron-right</div>
			
				<div class="icons__item" data-name="chevron-left"><i class="wb-chevron-left"></i> wb-chevron-left</div>
			
				<div class="icons__item" data-name="chevron-left-mini"><i class="wb-chevron-left-mini"></i> wb-chevron-left-mini</div>
			
				<div class="icons__item" data-name="chevron-right-mini"><i class="wb-chevron-right-mini"></i> wb-chevron-right-mini</div>
			
				<div class="icons__item" data-name="chevron-up"><i class="wb-chevron-up"></i> wb-chevron-up</div>
			
				<div class="icons__item" data-name="chevron-down"><i class="wb-chevron-down"></i> wb-chevron-down</div>
			
				<div class="icons__item" data-name="chevron-up-mini"><i class="wb-chevron-up-mini"></i> wb-chevron-up-mini</div>
			
				<div class="icons__item" data-name="chevron-down-mini"><i class="wb-chevron-down-mini"></i> wb-chevron-down-mini</div>
			
				<div class="icons__item" data-name="arrow-left"><i class="wb-arrow-left"></i> wb-arrow-left</div>
			
				<div class="icons__item" data-name="arrow-right"><i class="wb-arrow-right"></i> wb-arrow-right</div>
			
				<div class="icons__item" data-name="arrow-up"><i class="wb-arrow-up"></i> wb-arrow-up</div>
			
				<div class="icons__item" data-name="arrow-down"><i class="wb-arrow-down"></i> wb-arrow-down</div>
			
				<div class="icons__item" data-name="dropdown"><i class="wb-dropdown"></i> wb-dropdown</div>
			
				<div class="icons__item" data-name="dropup"><i class="wb-dropup"></i> wb-dropup</div>
			
				<div class="icons__item" data-name="dropright"><i class="wb-dropright"></i> wb-dropright</div>
			
				<div class="icons__item" data-name="dropleft"><i class="wb-dropleft"></i> wb-dropleft</div>
			
				<div class="icons__item" data-name="sort-vertical"><i class="wb-sort-vertical"></i> wb-sort-vertical</div>
			
				<div class="icons__item" data-name="triangle-left"><i class="wb-triangle-left"></i> wb-triangle-left</div>
			
				<div class="icons__item" data-name="triangle-right"><i class="wb-triangle-right"></i> wb-triangle-right</div>
			
				<div class="icons__item" data-name="triangle-down"><i class="wb-triangle-down"></i> wb-triangle-down</div>
			
				<div class="icons__item" data-name="triangle-up"><i class="wb-triangle-up"></i> wb-triangle-up</div>
			
				<div class="icons__item" data-name="check-circle"><i class="wb-check-circle"></i> wb-check-circle</div>
			
				<div class="icons__item" data-name="check"><i class="wb-check"></i> wb-check</div>
			
				<div class="icons__item" data-name="check-mini"><i class="wb-check-mini"></i> wb-check-mini</div>
			
				<div class="icons__item" data-name="close"><i class="wb-close"></i> wb-close</div>
			
				<div class="icons__item" data-name="close-mini"><i class="wb-close-mini"></i> wb-close-mini</div>
			
				<div class="icons__item" data-name="plus-circle"><i class="wb-plus-circle"></i> wb-plus-circle</div>
			
				<div class="icons__item" data-name="plus"><i class="wb-plus"></i> wb-plus</div>
			
				<div class="icons__item" data-name="minus-circle"><i class="wb-minus-circle"></i> wb-minus-circle</div>
			
				<div class="icons__item" data-name="minus"><i class="wb-minus"></i> wb-minus</div>
			
				<div class="icons__item" data-name="alert-circle"><i class="wb-alert-circle"></i> wb-alert-circle</div>
			
				<div class="icons__item" data-name="alert"><i class="wb-alert"></i> wb-alert</div>
			
				<div class="icons__item" data-name="help-circle"><i class="wb-help-circle"></i> wb-help-circle</div>
			
				<div class="icons__item" data-name="help"><i class="wb-help"></i> wb-help</div>
			
				<div class="icons__item" data-name="info-circle"><i class="wb-info-circle"></i> wb-info-circle</div>
			
				<div class="icons__item" data-name="info"><i class="wb-info"></i> wb-info</div>
			
				<div class="icons__item" data-name="warning"><i class="wb-warning"></i> wb-warning</div>
			
				<div class="icons__item" data-name="heart"><i class="wb-heart"></i> wb-heart</div>
			
				<div class="icons__item" data-name="heart-outline"><i class="wb-heart-outline"></i> wb-heart-outline</div>
			
				<div class="icons__item" data-name="star"><i class="wb-star"></i> wb-star</div>
			
				<div class="icons__item" data-name="star-half"><i class="wb-star-half"></i> wb-star-half</div>
			
				<div class="icons__item" data-name="star-outline"><i class="wb-star-outline"></i> wb-star-outline</div>
			
				<div class="icons__item" data-name="thumb-up"><i class="wb-thumb-up"></i> wb-thumb-up</div>
			
				<div class="icons__item" data-name="thumb-down"><i class="wb-thumb-down"></i> wb-thumb-down</div>
			
				<div class="icons__item" data-name="small-point"><i class="wb-small-point"></i> wb-small-point</div>
			
				<div class="icons__item" data-name="medium-point"><i class="wb-medium-point"></i> wb-medium-point</div>
			
				<div class="icons__item" data-name="large-point"><i class="wb-large-point"></i> wb-large-point</div>
			
		</div>

		

		<h1>Usage</h1>
		<pre><code>&lt;i class=&quot;wb-<span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>
		

		<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>

		<script>
		(function() {
			document.getElementById('icons').onclick = function(e) {
				e = e || window.event;
				var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
				document.getElementById('name').innerHTML = name;
				
			}
		})();
		</script>
	</body>
</html>
